<template>
	<view class="page">
		<navBar title="积分明细"></navBar>
		<view class="body">
			<div class="top">
				<view class="rule" @click="openRule">
					规则
					<u-icon name="question-circle"></u-icon>
				</view>
				<view class="balance">
					<view class="moneys">
						<view class="label">可使用积分</view>
						<view>¥ {{detail.current_gold_num}}</view>
						<text class="remark">积分可直接抵扣支付金额</text>
					</view>
				</view>
				<u-divider :use-slot="false" half-width="400" margin-top="29" margin-bottom="30"></u-divider>
				<view class="info-list">
					<view class="item">
						<view class="moneys">{{detail.gold_num}}</view>
						<view class="label">总积分</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{detail.cost_gold_num}}</view>
						<view class="label">已使用</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{detail.current_gold_num}}</view>
						<view class="label">可使用</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{detail.recorded_gold_num}}</view>
						<view class="label">待入账</view>
					</view>
				</view>
			</div>
			<view class="box">
				<view class="detail">
					<view class="switch">
						<view v-for="item in tabs" :key="item.type"
							:class="{item: true, active: detailType === item.type}"
							@click="changeDetailType(item.type)">
							{{item.name}}
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="item in list" :key="item.id">
							<view class="left">
								<view class="source">{{item.type}}</view>
								<view>{{item.createtime | formatTime}}</view>
							</view>
							<view class="money">+{{item.gold_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="load-hint" v-if="filter.finished">加载完成</view>
	</view>
</template>

<script>
	import {
		walletRecord,
		minCashApi
	} from "@/utils/api";
	import {
		integralDetailApi
	} from "@/api/my.js"
	import {
		mapGetters
	} from "vuex";
	import "./index.scss"
	import navBar from '@/components/navBar/navBar.vue'
	import {
		formatTime
	} from '@/utils/time.js'
	export default {
		computed: {
			...mapGetters(["userInfo"]),
			targetDetails() {
				if (this.current && this.details) {
					return this.details.filter(item => item.status == 5)
				} else {
					return []
				}
			}
		},
		watch: {},
		components: {
			navBar
		},
		data() {
			return {
				tabs: [{
						name: "钱包余额",
					},
					{
						name: "收益余额",
					},
				],
				tabs: [{
						name: '收入',
						type: 1
					},
					{
						name: '支出',
						type: 2
					},
				],
				background: {
					background: '#CB712B'
				},
				// 1-收入 2-支出
				detailType: 1,
				current: 0,
				filter: {
					page: 1,
					size: 10,
					finished: false
				},
				detail: {},
				list: []
			};
		},
		filters: {
			formatTime(val) {
				let str = formatTime(val, 'Y-M-D h:m:s')
				return str
			}
		},
		onLoad() {
			this.initDetails();
		},
		methods: {
			moneyFormat: (item) => {
				if ([1, 2, 4].includes(Number(item.status))) {
					return "-" + item.money;
				} else {
					return item.money;
				}
			},
			changeDetailType(type) {
				this.detailType = type
				this.filter.page = 1
				this.filter.finished = false
				this.initDetails()
			},
			async initDetails() {
				let res = await integralDetailApi({
					...this.filter,
					type: this.detailType
				})
				this.detail = res.data
				this.filter.finished = res.data.length < this.filter.size
				if (this.filter.page > 1) {
					this.list.push(...res.data.data)
				} else {
					this.list = res.data.data
				}
			},
			tabChange(index) {
				this.current = index;
			},
			openRule(){
				uni.navigateTo({
					url:`../agreement/agreement?type=2`
				})
			}
		},
		onReachBottom() {
			if (this.filter.finished) return
			this.filter.page++
			this.initDetails()
		}
	};
</script>
